<template>
  <view class="custom-tabbar">
    <view
      class="tabbar-item"
      v-for="(item, index) in tabbarItems"
      :key="index"
      @click="switchTab(index)"
    >
      <view class="tabbar-icon">
        <up-icon name="home" size="22" :color="currentIndex === index ? '#1989fa' : '#999'" :class="['gui-icons', { active: currentIndex === index }]"
        v-if="index === 0" />
        <up-icon name="grid" size="22":color="currentIndex === index ? '#1989fa' : '#999'" :class="['gui-icons', { active: currentIndex === index }]"
        v-if="index === 1" />
        <up-icon name="question" size="22" :color="currentIndex === index ? '#1989fa' : '#999'" :class="['gui-icons', { active: currentIndex === index }]"
        v-if="index === 2" />
        <up-icon name="share" size="22" :color="currentIndex === index ? '#1989fa' : '#999'" :class="['gui-icons', { active: currentIndex === index }]"
        v-if="index === 3" />
      </view>
      <text class="tabbar-text" :class="{ active: currentIndex === index }">{{
        item.text
      }}</text>
    </view>
  </view>
</template>

<script>
export default {
  props: {
    currentIndex: {
      type: Number,
      default: 0,
    },
  },
  data() {
    return {
      tabbarItems: [
        { icon: "&#xe608;", text: "首页" },
        { icon: "&#xe727;", text: "分类" },
        { icon: "&#xe6fe;", text: "新闻" },
        { icon: "&#xe6fe;", text: "发现" },
      ],
    };
  },
  methods: {
    switchTab(index) {
      this.$emit("tabChange", index);
    },
  },
};
</script>

<style scoped lang="scss">
.custom-tabbar {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 90rpx;
  background-color: #ffffff;
  display: flex;
  justify-content: space-around;
  align-items: center;
  box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
  z-index: 999;
  padding-bottom: 20rpx;
}

.tabbar-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 10rpx 0;
}

.tabbar-icon {
  height: 48rpx;
  width: 48rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-top: 10rpx;
}

.tabbar-icon-text {
  font-family: "gui-icons";
  font-size: 44rpx;
  color: #999;
}

.tabbar-text {
  font-size: 28rpx;
  margin-top: 4rpx;
  color: #999;
}

.active {
  color: #1989fa !important;
}
.gui-icons {
  font-family: "gui-iconfont";
  font-style: normal;
  font-size: 42rpx;
  color: #b5b5b5;
}
</style>
